<template>
  <d2-container :filename="filename">
    <el-container>
      <el-header>
        <el-button type="primary" @click="search()">查询</el-button></el-header
      >
      <el-main>
        <el-row>
          <el-form label-width="80px" ref="searchForm" :inline="true">
            <el-form-item label="用户名">
              <el-input v-model="searchData.userName"></el-input>
            </el-form-item>
            <el-form-item label="IP地址">
              <el-input v-model="searchData.clientIpAddress"></el-input>
            </el-form-item>
            <el-form-item label="异常">
              <el-select
                v-model="searchData.isException"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="调用方法">
              <el-input v-model="searchData.methodName"></el-input>
            </el-form-item>
            <el-form-item label="执行日期">
              <el-date-picker
                v-model="datetimeArr"
                type="datetimerange"
                :picker-options="pickerOptions2"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-table :data="tableData" stripe style="width: 100%" border>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="browserInfo" label="浏览器信息">
            </el-table-column>
            <el-table-column prop="clientIpAddress" label="IP地址">
            </el-table-column>
            <el-table-column prop="exception" label="异常信息">
            </el-table-column>
            <el-table-column
              prop="executionDuration"
              label="执行持续时间(毫秒)"
            >
            </el-table-column>
            <el-table-column prop="executionTime" label="执行日期">
            </el-table-column>
            <el-table-column prop="methodName" label="执行方法">
            </el-table-column>
            <el-table-column prop="parameters" label="参数"> </el-table-column>
            <el-table-column prop="serviceName" label="服务名">
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[20, 50, 100, 500]"
            :page-size="searchData.maxResultCount"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchData.total"
          >
          </el-pagination>
        </el-row>
      </el-main>
    </el-container>
  </d2-container>
</template>
<script>
import { GetList } from '@api/systemManage/auditLogs'
export default {
  name: 'auditLogs',
  data () {
    return {
      filename: __filename,
      searchData: {
        userName: '',
        startDate: '',
        endDate: '',
        clientIpAddress: '',
        isException: '',
        methodName: '',
        sorting: 'Id desc',
        maxResultCount: 20,
        skipCount: 0,
        total: 0
      },
      datetimeArr: [],
      options: [{ value: true, label: '是' }, { value: false, label: '否' }],
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      tableData: []
    }
  },
  created () {
    this.search()
  },
  methods: {
    search () {
      this.searchData.maxResultCount = 20
      this.searchData.skipCount = 0
      this.getList()
    },
    getList () {
      if (this.datetimeArr.length > 0) {
        this.searchData.startDate = this.datetimeArr[0]
        this.searchData.endDate = this.datetimeArr[1]
      } else {
        this.searchData.startDate = ''
        this.searchData.endDate = ''
      }
      GetList(this.searchData).then(res => {
        if (res.success) {
          this.tableData = res.result.items
          this.searchData.total = res.result.totalCount
        }
      })
    },
    handleSizeChange (val) {
      this.searchData.maxResultCount = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.searchData.skipCount = val - 1
      this.getList()
    }
  }
}
</script>
